<template>
  <a-modal
    title="学生"
    :width="640"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="ID"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          v-show="false"
        >
          <a-input
            :disabled="showable"
            placeholder="请输入"
            v-decorator="['id', {rules: [{required: false, message: 'ID'}]}]"/>
        </a-form-item>
        <a-form-item
          label="姓名"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            :disabled="showable"
            placeholder="请输入"
            v-decorator="['userName', {rules: [{required: true, message: '姓名'}]}]"/>
        </a-form-item>
        <a-form-item
          label="学号"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            :disabled="showable"
            placeholder="请输入"
            v-decorator="['userCode', {rules: [{required: false, message: '学号'}]}]"/>
        </a-form-item>
        <a-form-item
          label="钉钉ID"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            :disabled="showable"
            v-decorator="['userId',{rules: [{required: true, message: '钉钉ID'}]}]"/>
        </a-form-item>
        <a-form-item
          label="联系方式"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            :disabled="showable"
            placeholder="请输入"
            v-decorator="['mobile', {rules: [{required: true, message: '填写联系方式'}]}]"/>
        </a-form-item>
        <a-form-item
          label="学院"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-select
            showSearch
            :allowClear="true"
            :disabled="showable"
            placeholder="请选择"
            @change="changeCollege"
            v-decorator="['institute', {rules: [{required: true, message: '填写联系方式'}]}]"
            :options="collegeList"
          >
          </a-select>
        </a-form-item>
        <a-form-item
          label="专业班级"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            :disabled="showable"
            placeholder="请输入"
            v-decorator="['major', {rules: [{required: false, message: '填写专业班级'}]}]"/>
        </a-form-item>
        <a-form-item
          label="导员姓名"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            :disabled="showable"
            placeholder="请输入"
            v-decorator="['assistantName', {rules: [{required: false, message: '填写导员姓名'}]}]"/>
        </a-form-item>
        <a-form-item
          label="备注"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            :disabled="showable"
            placeholder="请输入"
            v-decorator="['remarks']"/>
        </a-form-item>
      </a-form>
    </a-spin>
    <template slot="footer">
      <div
        v-show="editable || addable"
      >
        <a-button key="cancel" @click="handleCancel">取消</a-button>
        <a-button key="forward" :loading="confirmLoading" type="primary" @click="handleOk">保存</a-button>
      </div>
    </template>
  </a-modal>

</template>

<script>
import {collegeList} from "@api/base/wfuBase";
import pick from 'lodash.pick'
import {getObj, addObj, putObj} from '@api/wfuStudent/student'
import {assistantList} from "@api/base/wfuBase";

export default {
  name: 'WfuStudentAddOrUpdate',
  components: {},
  data() {
    return {
      labelCol: {
        xs: {span: 24},
        sm: {span: 7}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 13}
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      editable: false,
      addable: false,
      showable: false,
      treeData: [],
      rangeDate: [],
      statusList: [
        {
          label: '是',
          value: '1'
        },
        {
          label: '否',
          value: '2'
        }
      ],
      queryParam: {
        institute: '',
        major: '',
        assistantName: '',
        timeScope: ''
      },
      collegeList: [],
      type: 'add'
    }
  },
  mounted() {
    collegeList().then(res => {
      this.collegeList = res.data
    })
  },
  methods: {
    // 获取用户信息
    edit(num, type) {
      this.visible = true
      if (type && type === 'add') {
        this.addable = true
        this.type = type
      }
      if (type === 'edit') {
        this.editable = true
        this.showable = false
        this.type = type
      }
      if (type === 'show') {
        this.editable = false
        this.showable = true
        this.type = type
      }
      const {form: {setFieldsValue, resetFields}} = this
      if (['edit'].includes(type) || ['show'].includes(type)) {
        this.confirmLoading = true
        getObj(num).then(res => {
          const record = res.data
          this.confirmLoading = false
          this.$nextTick(() => {
            setFieldsValue(pick(record, ['id', 'userId', 'userName', 'userCode', 'institute', 'major', 'mobile', 'assistantName', 'remarks']))
          })
        })
      } else {
        resetFields()
      }
    },
    // 结束保存用户信息
    handleOk() {
      this.form.validateFields(async (err, values) => {
        if (!err) {
          this.confirmLoading = true
          let message = null
          if (this.type === 'add') {
            await addObj(values).then(res => {
              if (res.code !== 200) {
                message = res.message
              }
            })
          } else if (this.type === 'edit') {
            await putObj(values).then(res => {
              if (res.code !== 200) {
                message = res.message
              }
            })
          }
          let timeout = 0
          if (message) {
            this.confirmLoading = false
            this.$message.error(message)
          } else {
            setTimeout(() => {
              this.confirmLoading = false
              this.$emit('ok')
              this.visible = false
            }, timeout)
          }
        }
      })
    },
    onChange(value) {
    },
    changeCollege(e) {
      this.queryParam.institute = e
      this.queryParam.assistantId = undefined
      assistantList(this.queryParam.institute).then(res => {
        this.assistantList = res.data
      })
      this.$forceUpdate()
    },
    handleCancel() {
      this.visible = false
      setTimeout(() => {
        this.addable = false
        this.showable = false
        this.editable = false
      }, 200)
    }
  }
}
</script>

<style scoped>

</style>
